<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<style>
        .login-third {
            margin-top: 3rem;
        }
	</style>
</head>
<body>
    <section class="aui-content aui-margin-t-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label aui-border-r color-orange">
                        手机号 <small class="aui-margin-l-5 aui-text-warning">+86</small>
                    </div>
                    <div class="aui-list-item-input aui-padded-l-10">
                        <input id="phone_id" type="number" pattern="[0-9]*" placeholder="输入手机号" id="mobile" >
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input" style="width: auto;">
                        <input type="number" pattern="^1[345678][0-9]{9}$" placeholder="输入短信验证码" id="code">
                    </div>
                    <div class="aui-list-item-label aui-margin-r-15" style="width: 6rem;">
                        <div class="aui-btn aui-btn-info" style="width: 6rem;">获取验证码</div>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <section class="aui-content-padded">
        <div onclick="bindPhone();" class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode>绑定手机号</div>
    </section>
    <section class="aui-content-padded login-third">
        <p class="aui-font-size-12 aui-text-center aui-margin-b-15">第三方账号登录</p>
        <div class="aui-grid" style="background: none;">
            <div class="aui-row">
                <div class="aui-col-xs-4">
                    <i class="aui-iconfont aui-icon-qq"></i>
                </div>
                <div class="aui-col-xs-4">
                    <i class="aui-iconfont aui-icon-wechat"></i>
                </div>
                <div class="aui-col-xs-4">
                    <i class="aui-iconfont aui-icon-weibo"></i>
                </div>
            </div>
        </div>
    </section>
</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    };

    function bindPhone(){
        var phone = $("#phone_id").val();
        var username = $api.getStorage('username');

        api.showProgress({
    		    style: 'default',
    		    animationType: 'fade',
    		    title: '拼命绑定中...',
    		    text: '不如喝茶去...',
    		    modal: false
    		});
    		api.ajax({
    		    url: ServeUrl+'m=Index&a=bindPhone',
    		    method: 'post',
    		    data: {
    		        values: {
    		            phone:phone,
                    username:username
    		        }
    		    }
    		},function(ret, err){
    				api.hideProgress();
            //alert(JSON.stringify(ret));
            if (ret.data.status == 1) {
                $api.setStorage('phone',phone);
                api.alert({
                   title:'绑定成功',
                   msg:'恭喜你，绑定成功了哦',
                },function(ret){
                    if(ret.buttonIndex == 1){
                        //api.closeWin();
                        api.closeToWin({
                            name: 'root',
                            reloa:true,
                        });
                    }
                });
            }else {
              api.toast({
                msg:ret.data.msg
              });
            }
    		});


    }
</script>
</html>
